<template>
  <div class="d-flex flex-column" style="height:100%">
    <!-- 搜索面板 -->
    <table-search-panel :title="title">
      <el-form :inline="true" :model="dataOfSearch" size="mini">
        <el-row>
          <el-col :span='6'>

          </el-col>
        </el-row>
        <el-form-item class="mb-0">
          <el-button type="primary" :loading="loadingOfSearch" @click="onSearch()">查询</el-button>
        </el-form-item>
      </el-form>
    </table-search-panel>
    <el-card class="card-sm card-table flex-grow-1 d-flex flex-column">
      <div slot="header">
        <!-- 工具栏 -->
        <table-toolbar :columns.sync="columns" :loading-of-refresh.sync="loadingOfRefresh" :title-of-print="title"
          @click="onClickToolbar">
        </table-toolbar>
      </div>
      <el-table :data="dataOfMain" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        style="width: 100%" height="100%" fixed :loading="loadingOfList"
        @selection-change="onCheckTableRows">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="主键ID" v-if="columns.id.visible"></el-table-column>
        <el-table-column prop="pid" label="父级ID" v-if="columns.pid.visible"></el-table-column>
        <el-table-column prop="text" label="规则标题" v-if="columns.text.visible"></el-table-column>
        <el-table-column prop="link" label="规则路径" v-if="columns.link.visible"></el-table-column>
        <el-table-column prop="icon" label="图标" v-if="columns.icon.visible">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.icon" :preview-src-list="[scope.row.icon]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="extra" label="扩展数据" v-if="columns.extra.visible"></el-table-column>
        <el-table-column prop="sort" label="排序权重" v-if="columns.sort.visible"></el-table-column>
        <el-table-column prop="app_flag" label="模块标志" v-if="columns.app_flag.visible"></el-table-column>
        <el-table-column prop="status" label="状态" v-if="columns.status.visible"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="onClickToolbar('edit', scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="onClickToolbar('delete', scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="pagnation-bar">
      <el-pagination @size-change="onPaging('size', $event)" @current-change="onPaging('page', $event)"
        :current-page="page" :page-sizes="[10, 20, 50, 100, 1000]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <auth-rules-edit ref="editDialog" @close="onCloseDialog('edit')"></auth-rules-edit>
  </div>
</template>

<script>
import AuthRulesEdit from "./Edit.vue";
import TableSearchPanel from "@/components/TableSearchPanel/TableSearchPanel.vue";
import TableToolbar from "@/components/TableToolbar/TableToolbar.vue";
/**
 * 权限规则管理页面
 */
export default {
  name: "AuthRulesIndex",
  components: { AuthRulesEdit, TableSearchPanel, TableToolbar },
  data() {
    return {
      // 页面标题
      title: "权限规则管理",
      total: 400,
      page: 1,
      pageSize: 10,
      // 数据加载状态
      loadingOfRefresh: false,
      loadingOfSearch: false,
      loadingOfPaging: false,
      loadingOfList: false,
      // 表格列
      columns: {
        id: { title: '主键ID', visible: true },
        pid: { title: '父级ID', visible: true },
        text: { title: '规则标题', visible: true },
        link: { title: '规则路径', visible: true },
        icon: { title: '图标', visible: true },
        extra: { title: '扩展数据', visible: true },
        sort: { title: '排序权重', visible: true },
        app_flag: { title: '模块标志', visible: true },
        status: { title: '状态', visible: true },
      },
      // 查询数据
      dataOfSearch: {},
      // 表格数据
      dataOfMain: [],
      // 已勾选的表格行
      dataOfCheckedRows: [],
      dataOfCheckedKeys: [],
    };
  },
  methods: {
    // 加载列表数据
    loadData() {
      this.loadingOfList = true;
      // 通过传参 _success 来控制返回消息的成功状态。
      this.dataOfSearch._success = true;
      console.log('[加载数据列表] 查询参数= ', this.dataOfSearch);
      this.vuiAjax
        .get(this.apiUrls.authRulesIndex, { params: this.dataOfSearch })
        .then(ret => {
          this.loadingOfRefresh = this.loadingOfList = this.loadingOfSearch = this.loadingOfPaging = false;
          console.log("[加载数据列表] 返回结果= ", ret);
          if (!ret.success) {
            this.$message.error(ret.message);
            return;
          }
          this.dataOfMain = ret.data.data;
        })
        .catch(msgInfo => {
          this.loadingOfRefresh = this.loadingOfList = this.loadingOfSearch = this.loadingOfPaging = false;
          this.$message.error(msgInfo.msg);
        });
    },
    // 表格行勾选事件
    onCheckTableRows(checkedRows) {
      console.log("[表格行勾选事件] ", checkedRows);
      this.dataOfCheckedRows = checkedRows;
      this.dataOfCheckedKeys = checkedRows.map(item => item.id)
    },
    // 点击工具栏（表头工具栏和单元格工具栏）
    onClickToolbar(name, item) {
      console.log("[点击工具栏] ", name, item);
      switch (name) {
        case "create":
          console.log("点击按钮 工具栏 - 新增");
          this.$refs.editDialog.open("新增权限规则");
          break;
        case "edit-multi":
          console.log("点击按钮 工具栏 - 批量编辑", this.dataOfCheckedKeys.join(','));
          break;
        case "copy-multi":
          console.log("点击按钮 工具栏 - 批量复制", this.dataOfCheckedKeys.join(','));
          break;
        case "delete-multi":
          console.log("点击按钮 工具栏 - 批量删除", this.dataOfCheckedKeys.join(','));
          if (this.dataOfCheckedKeys.length == 0) {
            this.$message.info('未勾选任何记录');
            return;
          }
          this.$confirm('您确定删除' + this.dataOfCheckedKeys.length + '条记录吗?', '提示', {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.vuiAjax
              .get(this.apiUrls.authRulesDelete, { params: { id: this.dataOfCheckedKeys } })
              .then((ret) => {
                console.log("[批量删除] ", ret);
                if (!ret.success) {
                  this.$message.error(ret.message);
                  return;
                }
                this.loadData();
              })
              .catch((msgInfo) => {
                this.$message.error(msgInfo.msg);
              });
          });

          break;
        case "import":
          console.log("点击按钮 工具栏 - 导入");
          // 设置导入表单参数等
          break;
        case "export":
          console.log("点击按钮 工具栏 - 导出");
          break;
        case "refresh":
          console.log("点击按钮 工具栏 - 刷新");
          this.loadingOfRefresh = true;
          this.loadData();
          break;
        case "edit":
          console.log("点击按钮 单元格 - 编辑");
          this.$refs.editDialog.open("编辑", 1);
          break;
        case "delete":
          console.log("点击按钮 单元格 - 删除");
          break;
        case "copy":
          console.log("点击按钮 单元格 - 复制");
          break;
        default:
          break;
      }
    },
    // 查询操作
    onSearch() {
      this.loadingOfSearch = true;
      this.loadData();
    },
    // 分页事件
    onPaging(type, val) {
      this.loadingOfPaging = true
      console.log('[分页事件] ', type, val);
      switch (type) {
        case 'page':
          this.page = val;
          break;
        case 'size':
          this.page = 1;
          this.pageSize = val;
          break;
        default:
          break;
      }
      this.loadData();
    },
    // 导入数据
    onImportExcel(success, ret) {
      if (!success) {
        this.$message.error(ret.message);
        return;
      }
      console.log("[导入数据] 上传成功 ", ret);
    },
  },
  created() {
    this.loadData();
  },
};
</script>